<template>
  <div ref="editor" style="height: 500px" />
</template>

<script>
import 'jsoneditor/dist/jsoneditor.css'
import JSONEditor from 'jsoneditor'
export default {
  props: {
    value: {
      type: Object
    }
  },
  data() {
    return {
      editor: null
    }
  },
  watch: {
    value(val) {
      if (this.editor) {
        this.editor.set(val)
      }
    }
  },
  mounted() {
    this.editor = new JSONEditor(this.$refs['editor'], {
      modes: ['tree', 'view', 'form', 'code', 'text', 'preview']
    })
  }
}
</script>

<style>

</style>
